<template>
		<uni-popup ref="popupRef" type="bottom" :safe-area="false">
			<view class="popup">
				<view class="title">获取你的昵称、头像</view>
				<view class="descript">
					获取用户头像昵称，主要向用户提供具有辨别度的用户中心界面
				</view>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="item">
						<view class="label">头像</view>
						<view class="content">
							<image :src="avatarUrl" mode="aspectFill"></image>
						</view>
						<u-icon name="arrow-right" color="#999" bold top="2rpx" size="28rpx"></u-icon>
					</view>
				</button> 

				<view class="item">
					<view class="label">昵称</view>
					<view class="content">
						<input type="nickname" placeholder="输入昵称" v-model="nickname" />
					</view>
				</view>
				<view class="confirm" @click="confirm">确认</view>
				<u-safe-bottom />
			</view>
		</uni-popup>
</template>

<script>
	import {generateRandomString} from '@/utils/tools.js'
	export default {
		name:"user-info-modal",
		data() {
			return {
				avatarUrl: 'https://wt-1310486663.cos.ap-beijing.myqcloud.com/zgzj/jingzhang/static/images/avatar.png',
				nickname: '用户' + generateRandomString(4)
			};
		},
		methods: {
			open(){
				this.$refs.popupRef.open();
			},
			close(){
				this.$refs.popupRef.close();
			},
			onChooseAvatar(e){
				const { avatarUrl } = e.detail;
				this.avatarUrl = avatarUrl;
			},
			confirm(){
				this.$emit('confirm', {
					avatarUrl: this.avatarUrl,
					nickname: this.nickname
				});
				this.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 40rpx 30rpx 0 30rpx;
		.avatar-wrapper{
			background-color: transparent;
			padding: 0;
			&::after{
				border: 0;
			}
		}
		.close{
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
		.title{
			color: $black;
			font-size: $fs-32;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.descript{
			color: $grey;
			font-size: $fs-28;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid $background-grey;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100rpx;
			font-size: $fs-28;
			color: $black;
			border-bottom: 2rpx solid $background-grey;
			.label{
				width: 80rpx;
				text-align: left;
			}
			.content{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}
			}
		}
		.confirm{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 500rpx;
			height: 80rpx;
			font-size: $fs-30;
			font-weight: bold;
			color: $white;
			background-color: $primary;
			border-radius: 80rpx;
			margin: 30rpx auto 0 auto;
		}
	}
</style>